<template>
  <view class="content">
    <view v-if="JSON.stringify(list) != '[]'" class="list-block">
      <view class="item-block mt-20" v-for="(item, index) in list" :key="index" @click="routeToDetail(item.id)">
        <view class="header-block border-b-common pb-20">
          <view class="date-block">整改期限：{{item.rectificationLimit ? item.rectificationLimit : '-'}}</view>
          <view class="date-block">延期日期：{{item.deferDate ? item.deferDate : '-'}}</view>
          <u-tag size="mini" plain :text="item.stateName"></u-tag>
        </view>
        <view class="body-block border-b-common pb-10">
          <view class="body-item pt-20 pb-25">隐患名称：{{item.htName ? item.htName : '-'}}</view>
          <view class="body-item pt-20 pb-25">隐患等级：{{item.levelName ? item.levelName : '-'}}</view>
          <view class="body-item pt-20 pb-25">检查单位：{{item.checkDept ? item.checkDept : '-'}}</view>
          <view class="body-item pt-20 pb-25">检查人：{{item.checkPeo ? item.checkPeo : '-'}}</view>
          <view class="body-item pt-20 pb-25">所属单位：{{item.beCheckDept ? item.beCheckDept : '-'}}</view>
          <view class="body-item pt-20 pb-25">隐患描述：{{item.description ? item.description : '-'}}</view>
          <view class="body-item pt-20 pb-25">隐患来源：{{item.sourceName ? item.sourceName : '-'}}</view>
        </view>
        <view class="footer-block pt-20">
          <view class="info-block">
            <view class="date-block">检查日期：{{item.checkDate ? item.checkDate : '-'}}</view>
            <view class="date-block mt-10">检查人：{{item.checkPeo ? item.checkPeo : '-'}}</view>
          </view>
          <view class="button-block">
            <u-button class="button" type="primary" :customStyle="{width: '120rpx', height: '50rpx'}" text="审批"></u-button>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="empty-block">
      <u-empty text="暂无数据" mode="data" icon-size="80"></u-empty>
    </view>
  </view>
</template>

<script>
  import { getEditDelayListApi } from '@/apis/danger/index.js'

  export default {
    data() {
      return {
        params: {
          pageNo: 1,
          pageSize: 10,
          states: 5
        },
        list: [],
        pushState: true
      }
    },
    onPullDownRefresh() {
      this.getEditDelayList(Object.assign(this.params, {pageNo: 1, pageSize: 10}))
    },
    onReachBottom() {
      if(this.pushState) this.getEditDelayList(Object.assign(this.params, {pageNo: this.params.pageNo + 1}), false)
    },
    onShow() {
      this.getEditDelayList(Object.assign(this.params, {pageNo: 1}))
    },
    methods: {
      getEditDelayList: function(params, freshState = true) {
        getEditDelayListApi(params).then(res => {
          if(freshState) {
            this.pushState = true
            this.list = res.list
          } else {
            this.list = this.list.concat(res.list)
          }
          if(res.list.length < this.params.pageSize) this.pushState = false
          uni.stopPullDownRefresh()
        }).catch(err => console.warn(err))
      },
      routeToDetail: function(id) {
        uni.navigateTo({ url: `/pagesDanger/editDelayDetail?id=${id}` })
      }
    }
  }
</script>

<style>
  page {
    background-color: #F4F4F4;
  }
</style>

<style lang="scss" scoped>
  .border-b-common {
    border-bottom: 1rpx solid #F4F4F4;
  }
  .content {
    padding: 0 25rpx 50rpx 25rpx;
    .list-block {
      .item-block {
        background-color: #FFFFFF;
        border-radius: 6rpx;
        box-shadow: 0 0 10rpx 0 #F4F4F4;
        padding: 25rpx;
        margin-top: 25rpx;
        .header-block {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .date-block {
            width: 260rpx;
            font-size: 24rpx;
            line-height: 32rpx;
            color: #333333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .body-block {
          .body-item {
            font-size: 28rpx;
            line-height: 40rpx;
            color: #666666;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .footer-block {
          @extend .header-block;
          align-items: flex-end;
        }
        .button-block {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .button {
            width: 100rpx;
          }
        }
      }
    }
    .empty-block {
      padding-top: 300rpx;
    }
  }
</style>
